<script setup lang="ts">
import { reqAllUser, reqOrderState, reqUserOrderInfo } from '@/apis/user';
import type { UserOrderInfoResponseData, Records, AllUser, AllOrderState, AllUserResponseData, AllOrderStateResponseData } from '@/apis/user/type';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const $router = useRouter()
const pageNo = ref<number>(1)
const pageSize = ref<number>(10)
const patientId = ref<string>('')
const orderStatus = ref<string>('')
const allOrderArr = ref<Records>([])
const total = ref<number>(0)
const allUser = ref<AllUser>([])
const allOrderState = ref<AllOrderState>([])
onMounted(() => {
  getOrderInfo()
  geOptionData()
})

const getOrderInfo = async () => {
  const res:UserOrderInfoResponseData = await reqUserOrderInfo(
    pageNo.value,
    pageSize.value,
    patientId.value,
    orderStatus.value
  )
  if(res.code==200){
    allOrderArr.value = res.data.records
    total.value = res.data.total
  }
}

const goDetail = (row:any) =>{
  $router.push({path:'/user/order/', query:{orderId:row.id}})
}

const geOptionData = async () => {
  const res1:AllUserResponseData = await reqAllUser()
  const res2:AllOrderStateResponseData = await reqOrderState()
  allUser.value = res1.data
  allOrderState.value = res2.data
}
</script>



<template>
  <!-- 展示全部订单的结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!--提供用户选择的下拉菜单-->
    <el-form :inline="true">
      <el-form-item label="就诊人" style="width: 25%;">
        <el-select placeholder="请选择就诊人" v-model="patientId" @change="getOrderInfo()">
          <el-option label="全部就诊人"></el-option>
          <el-option v-for="user in allUser" :key="user.id" :label="user.name" :value="user.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" style="width: 25%;">
        <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="getOrderInfo()">
          <el-option label="全部订单"></el-option>
          <el-option v-for="(type, index) in allOrderState" :key="index" :label="type.comment" :value="type.status"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格展示订单的数据 -->
    <el-table border style="margin: 10px 0px" :data="allOrderArr">
      <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
      <el-table-column label="医院" prop="hosname"></el-table-column>
      <el-table-column label="科室" prop="depname"></el-table-column>
      <el-table-column label="医生" prop="title"></el-table-column>
      <el-table-column label="服务费" prop="amount"></el-table-column>
      <el-table-column label="就诊人" prop="patientName"></el-table-column>
      <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
      <el-table-column label="操作">
        <template #="{row}">
          <el-button type="tsxt" @click="goDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo" 
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]" 
      :total=total
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total" 
      @current-change="getOrderInfo"
      @size-change="getOrderInfo"
      />
  </el-card>
</template>



<style scoped lang="scss"></style>